const app = new Vue({
  el: '#app',
  data: {
    books: [
    {
      id: 1,
      name: '《算法导论》',
      date: '2006-9',
      price: 85.00,
      count: 1
    },
    {
      id: 2,
      name: '《UNIX编程艺术》',
      date: '2006-2',
      price: 59.00,
      count: 1
    },
    {
      id: 3,
      name: '《编程珠玑》',
      date: '2008-10',
      price: 39.00,
      count: 1
    },
    {
      id: 4,
      name: '《代码大全》',
      date: '2006-3',
      price: 128.00,
      count: 1
    }]
  },
  methods: {
    getFinalPrice(price) {
      return '$' + price.toFixed(2)
    },
    sub(index) {
      console.log(index)
      this.books[index].count--
    },
    add(index) {
      this.books[index].count++
    },
    remove(index) {
      this.books.splice(index, 1)
    }
  },
  // 过滤器
  filters: {
    showPrice(price) {
      return '$' + price.toFixed(2)
    }
  },
  computed: {
    total() {
      // let total = 0
      // this.books.forEach(item => {
      //   total += item.price * item.count
      // });
      // return total

      // 1.reduce 高阶函数
      return this.books.reduce((total, current) => {
        total += current.price * current.count
        return total
      }, 0);

      // 2.for..in  ------ for..in 遍历的是数组的索引值,对象的key
      // let total = 0
      // for (let i in this.books) {
      //   total += this.books[i].price * this.books[i].count
      // }
      // return total

      // 3.for..of  ------- for.of 遍历的是数组的某一项 (ES6引入的新的语法，用于循环遍历集合)
      // let total = 0
      // for (let item of this.books) {
      //   total += item.price * item.count
      // }
      // return total
    }
  }
})